<template>
  <div class="patrolTypes-root">
    <formTitleVue
      title="今日报警统计"
    />
    <!-- <div id="echarts-types"></div> -->
    <div class="main-alarmtoday">
          <div class="main-li">
            <img class="mid" src="@/assets/alarm/01.png" alt="">
            <div class="mid">
              <p>今日报警</p>
              <div class="mide-bottom">
                <span class="big-num" style="color:#fc5d5d;">{{todayData.recordNum}}</span>
                <span class="bottom">较昨日 <i :class="recordCompare.class" :style="recordCompare.color">{{recordCompare.num}}</i></span>
              </div>
            </div>
          </div>
          <div class="main-li">
            <img src="@/assets/alarm/03.png" alt="">
            <div class="mid">
              <p>已处置报警</p>
              <div class="mide-bottom">
                <span class="big-num">{{todayData.recordCzNum}}</span>
                <span class="bottom"></span>
              </div>
            </div>
          </div>
          <div class="main-li">
            <img src="@/assets/alarm/03.png" alt="">
            <div class="mid">
              <p>处置率</p>
              <div class="mide-bottom">
                <span class="big-num">{{todayData.recordPercent}}</span>
                <span class="bottom"></span>
              </div>
            </div>
          </div>
        </div>
    <!-- <myPieRing domId="patrol-patrolTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/> -->
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPie from '@/components/Echarts/myPie.vue';
import { time_select_optios } from '@/utils/global.js';
import { api_alarmDayListAll } from '@/api/jcfx/jcsjtj.js'

export default {
  name: "patrolTypes",
  components: {
    formTitleVue,myPie,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            // { label: "近一月", value: "近一月" },
            // { label: "近半年", value: "近半年" },
            // { label: "近一年", value: "近一年" },
          ]
        }
      ],
      searChForm: {
        bModeType: '',
        areaCode: this.$store.state.account.user.deptIds,
      },
      todayData:{
        recordNum:0,
        tbRecordNum:0,
        recordCzNum:0,
        recordCzNum1:0,
        warnNum:0,
        tbWarnNum:0,
        warnCzNum:0,
        recordPercent:0,
      },
      recordCompare:{
        class:"el-icon-caret-bottom",
        color:"color:green",
        num:"0%",
      },
      warnCompare:{
        class:"el-icon-caret-bottom",
        color:"color:green",
        num:"0%",
      },
    };
  },
  methods: {
    selectChange(item) {
      // console.log(item);
      let time_select = time_select_optios[item]||{}
      this.searChForm.bModeType = item
      this.getData()
    },
    getPercent(today,yesterday){
      if(today==yesterday){
        return {
          class:"el-icon-caret-bottom",
          color:"color:green",
          num:"0%",
        }
      }
      // 同比增长率=（本期数－同期数）÷同期数×100%
      if(today>yesterday){
        let num = today*100 + "%"
        if(yesterday!=0){
            num =((today-yesterday)/yesterday*100).toFixed(2) + "%"
        }
        return {
          class:"el-icon-caret-top",
          color:"color:red",
          num:num,
        }
      }
      if(today<yesterday){
        let num = ((yesterday-today)/yesterday*100).toFixed(2) +"%"
        return {
          class:"el-icon-caret-bottom",
          color:"color:green",
          num:num,
        }
      }
    },
    getData(){
      api_alarmDayListAll(this.searChForm).then(res => {
        // console.log(res)
        let data = res.data
        // data.recordNum = 3
        // data.tbRecordNum = 1
        // data.recordCzNum = 2
        this.todayData.recordNum = data.recordNum
        const showData = this.getPercent(data.recordNum,data.tbRecordNum)
        this.recordCompare.class = showData.class
        this.recordCompare.color = showData.color
        this.recordCompare.num = showData.num
        this.todayData.recordCzNum = data.recordCzNum
        if(data.recordNum==0){
          this.todayData.recordPercent = "0%"
        }else{
          this.todayData.recordPercent = (data.recordCzNum/data.recordNum).toFixed(2)*100 + "%"
        }
      })
    },
    getDict(){
      // 获取字典值
      this.alarmBclassify_options = []
      this.$commonJs.filterDataDict("alarmBclassify", this.alarmBclassify_options)
      // console.log(this.alarmBclassify_options)
      // 后台返回的字典没有value，需要手动添加
      this.alarmBclassify_options.forEach(item => {
        item.value = item.valueText
      })
      this.alarmBclassify_options.unshift({label: '全部', value: ''})
      this.selectOptions[0].selectValue = this.alarmBclassify_options[0].value
      this.selectOptions[0].options = this.alarmBclassify_options
    },
  },
  mounted() {
    this.getDict()
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.patrolTypes-root {
  #echarts-types {
    height: 30vh;
  }
  .main-alarmtoday{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .main-li{
      width: 25%;
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center;
      text-align: center;
      margin: 40px 0 40px 0;
      .mid{
        // width: 50%;
        .mide-bottom{
          margin-top: 8px;
          display: flex;
        }
      }
      img{
        width: 56px !important;
        margin-right: 12px;
      }
      .bottom{
        text-align: left;
        color: #83878b;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }
      .big-num{
        // display: inline-block;
        // width: 100%;
        font-size: 26px;
        margin: 0px 10px 0 0;
      }
      p{
        margin: 0;
        text-align: left;
        font-size: 18px;
      }
    }
  }
}
</style>
